<template>
  <main class="myUser-box">
    <div class="business-list">
      <el-row
        v-hasPermi="['work:commercialManager:placeList']"
        :gutter="20"
        type="flex"
      >
        <el-col class="newCard" :span="8">
          <NewCard title="渠道列表" :isright="true">
            <template #right>
              <ComForm
                @EventOnsubmit="inquireFn"
                :list="comForm"
                title="搜索"
                v-if="isRolesShow()"
              ></ComForm>
            </template>
            <!-- 表格 -->
            <el-table
              @row-click="rowClick"
              :data="placeList"
              style="width: 100%"
              highlight-current-row
              @cell-click="tableClick"
              show-summary
              :summary-method="getSummaries"
              v-if="isRolesShow()"
            >
              <el-table-column label="渠道" width="90" show-overflow-tooltip>
                <template slot-scope="scope">
                  <p>{{ scope.row && scope.row.name }}</p>
                </template>
              </el-table-column>
              <el-table-column prop="phonenumber" label="手机号" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="createTime" label="注册时间">
                <template slot-scope="scope">
                  <p>
                    {{
                      scope.row.createTime && scope.row.createTime.split(" ")[0]
                    }}
                  </p>
                </template>
              </el-table-column>
              <el-table-column
                prop="credit"
               
                sortable
                label="消费金额"
              >
                <template slot-scope="scope">
                  <p>{{ scope.row.credit | sumFilters }}</p>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :page-sizes="[10, 20, 30, 40]"
                  :pager-count="5"
                  layout="prev, pager, next"
                  :total="pageing.total"
                >
                </el-pagination>
              </div>
            <!-- <el-button class="InvitedUser" @click="inviteFn">邀请新用户</el-button> -->
          </NewCard>
        </el-col>
        <el-col :span="16">
          <NewCard :title="`圈主-${ selectItem&&selectItem.nickName }`">
            <Visual :selectItem="selectItem" v-if="isRolesShow()"></Visual>
          </NewCard>
        </el-col>
      </el-row>
    </div>
    <Invite
      :getcommercialManagerplaceList="getcommercialManagerplaceList"
      :isOpen.sync="isOpenInvite"
    ></Invite>
  </main>
</template>

<script>
import { getcommercialManagerplaceListApi } from "@/wss/newApi_3-24/work/commercialManager.js";
import NewCard from "@/wss/components/newCard.vue";
import ComForm from "@/wss/components/comForm.vue";
import Visual from "./visual";
import {
  getPlaceListApi,
  getPlaceGetInfoApi,
} from "@/BMViews/api/base/place.js";
import Invite from "./invite.vue";
const arr = [null, "", undefined];
export default {
  name: "Channel",
  components: { NewCard, ComForm, Visual, Invite },
  data() {
    return {
      pageing: { pageNum: 1, pageSize: 10, total: 0 },
      // 表单配置
      comForm: {
        modes: [
          {
            mode: "nickName",
            formType: "input",
            placeholder: "渠道",
          },
        ],
      },
      // 是否打开邀请用户抽屉
      isOpenInvite: false,
      // 表格数据
      tableList: [
        {
          name: "曹建国",
          phone: "138 0013 8000",
          time: "2022-05-06",
          credit: "37680",
        },
        {
          name: "刘易阳",
          phone: "138 0013 8000",
          time: "2022-05-06",
          credit: "337680",
        },
        {
          name: "张三",
          phone: "138 0013 8000",
          time: "2022-05-06",
          credit: "3780",
        },
        {
          name: "李四",
          phone: "138 0013 8000",
          time: "2022-05-06",
          credit: "4650",
        },
      ],
      // 渠道列表
      placeList: [],

      selectItem:{},//选择某一行，选择某一个渠道的用户
    };
  },
  created() {
    // this.getPlaceListFn();
    this.getcommercialManagerplaceList();
  },
  methods: {

    // 判断当前项目列表是否展示 根据角色
    isRolesShow(){
      let roles = this.$store.state.user.roles
      if(roles.includes('admin') || roles.includes('qdzy')){
        return true
      }else{
        return false
      }
    },

    // 用户列表表格被点击
    tableClick(row) {
      console.log(row);
    },

    // 查询函数
    inquireFn([{ nickName = "" }]) {
      const placeList = this.placeListFilter;
      this.placeList = placeList.filter((item) => {
        return item?.nickName?.includes(nickName);
      });
    },

    // 获取渠道
    async getcommercialManagerplaceList() {
      try {
        let { code, rows,total } = await getcommercialManagerplaceListApi(this.pageing);
        if (code != 200) return;
        this.pageing.total=total
        this.placeList = JSON.parse(JSON.stringify(rows));
        this.placeList = this.placeList.filter((item) => Boolean(item));
        this.placeListFilter = JSON.parse(JSON.stringify(rows));

        this.selectItem = this.placeList[0]// 默认选中一行
      } catch (error) {
        this.$message({
          type: "error",
          message: "你当前不是渠道角色",
        });
      }
    },

    // 点击某一行
    rowClick(row, column, event){
      this.selectItem = row
    },

    // 邀请
    inviteFn() {
      this.isOpenInvite = true;
    },
    //
    async getInfo({ id }) {
      // let res = await getPlaceGetInfoApi({ id });
      // console.log(res, "这是搞定了吗");
    },
    // 获取聚到列表
    // async getPlaceListFn() {
    //   let { code, rows } = await getPlaceListApi();
    //   if (code != 200) return;
    //   this.placeList = JSON.parse(JSON.stringify(rows));
    // },

    // 表格总计行的规则 ****************
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        if (index === 1) {
          sums[index] = "--";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index];
        } else {
          sums[index] = "--";
        }
        if (index === 3) {
          sums[index] = this.$options.filters["sumFilters"](sums[index]);
          return;
        }
      });

      return sums;
    },
    // 表格总计行的规则 **************** end
        // 当前页发生改变时
    handleCurrentChange(pageNum) {
      this.pageing.pageNum = pageNum;
      this.getcommercialManagerplaceList();
    },
    // 页容量发生改变
    handleSizeChange(pageSize) {
      this.pageing.pageSize = pageSize;
      this.getcommercialManagerplaceList();
    },
  },
};
</script>

<style scoped lang="scss">
.myUser-box{
  height: 100%;
}
.newCard {
  .el-card{
    position: relative;
  }
  .InvitedUser {
    position: absolute;
    bottom: 0px;
    left: 0px;
    border: 0;
    width: 100%;
    font-size: 16px;
    margin-top: 15px;
    padding: 15px 20px;
    background-color: #f8f8f8;
    border-top: 1px solid #e6ebf5;
    text-align: center;
    &:hover{
      background-color: #f8f8f8;
      color: #f87a23;
    }
  }
}
.business-list {
  height: 100%;
  overflow: initial;
}
.business-list .el-row {
  height: 100%;
}
::v-deep .business-list .el-row .el-card__body {
  height: 100%;
}
::v-deep .business-list .el-row .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
::v-deep .business-list .el-row .el-card__body > div::-webkit-scrollbar {
  width: 0;
}

/* 表单搜索 */
::v-deep .business-list .el-form .el-input--medium {
  width: 120px !important;
}
::v-deep .business-list .el-form .el-button--default {
  display: none;
}

/* 表格样式 */
.el-table {
  margin-bottom: 10px;
}
::v-deep .el-table .el-table__header-wrapper th {
  background-color: #fff;
}
::v-deep .el-table th.is-leaf {
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
::v-deep .el-table th > .cell {
  font-size: 12px;
  color: #909aaa;
}
::v-deep .el-table .cell,
::v-deep .el-table .cell p {
  margin: 0;
  font-size: 14px;
  color: #2e3f5e;
}
::v-deep .el-table .cell .el-button {
  color: #f87a23;
}
::v-deep .el-table .cell .el-table__expand-icon i::before {
  content: "\E791";
}
::v-deep .el-table td {
  /* border-bottom: 0; */
}
::v-deep .el-table td .islight {
  color: #f87a23;
}
::v-deep .el-table .el-table__expanded-cell[class*="cell"] {
  padding: 0;
}
::v-deep .el-table__expanded-cell .el-table::before {
  height: 0;
}
::v-deep .el-table__expanded-cell .el-table th.is-leaf {
  border-top: 0;
}
::v-deep .el-table__expanded-cell .el-table td {
  border-bottom: 0;
}
::v-deep .el-button:hover {
  color: #ffffff;
  background: #f87a23;
}
::v-deep .el-table__footer-wrapper tbody td {
  background-color: #fff;
  font-weight: bold;
  color: #2e3f5e;
}
::v-deep .el-card__body {
  height: 100%;
}

.pagination{
  text-align: center;
  margin-bottom: 30px;
}
@media (max-width: 1180px) {
  ::v-deep .business-list .el-form .el-input--medium {
    width: 60px !important;
  }
  ::v-deep .business-list .el-form .el-input--medium .el-input__inner {
    padding: 0 10px;
  }
}
</style>
